<template>
	<div class="homeCls">
    <div>
      <top-img/>
      <product-type/>
      <slide-show/>
      <div class="showProBox">
        <div v-for="(item,index) in contents" class="boxTier">
          <div class="boxSerFont" v-if="item.content.length != 0">
            <span>{{item.type}}</span>
          </div>
          <pro-show-box :data="item.content"  v-if="item.content.length != 0" />
        </div>
      </div>
      <foot-nva/>
    </div>
  </div>
</template>

<script>
  import topImg from "./topimg/TopImg"
  import ProductType from "../../components/content/productclass/ProductType";
  import SlideShow from "./slideshow/SlideShow";

  import proShowBox from "../../components/content/proshow/proShowBox";

  import footNva from "../../components/content/buttomNav/footNva";

  import {mapGetters} from "vuex"
  export default {
    name: "Home",
    components: {
      topImg,
      ProductType,
      SlideShow,
      proShowBox,
      footNva
    },
    computed: {
      ...mapGetters({
        preShow: "PreShow/getData"
      })
    },
    created() {
      this.contents = this.preShow;
    },
    data() {
      return {
        contents: []
      }
    }
  }
</script>

<style scoped>
  .showProBox{
    display: flex;
    flex-direction: column;
    margin-left: 10%;
    margin-top: 10%;
  }

  .boxTier{
    margin-bottom: 10%;
  }

  .boxSerFont{
    margin-left: 3%;
    margin-bottom: 10px;
    font-size: 25px;
    height: 50px;
  }

  /*home样式*/
  .homeCls{
    background-color: #e7e7e7;
  }
</style>
